<template>
	<view class="content">
		<image src="/static/index/indexBg.png" class="indexBg" mode="widthFix"></image>
		<view class="logoLay">
			
		<image src="/static/logo.png" class="logo" mode="widthFix"></image>
		<image src="/static/logoTxt.png" class="logoTxt" mode="widthFix"></image>
		</view>
		<view class="loginWrap">
			<view class="title">
				手机号登录
			</view>
			<view class="subTitle">
				未注册手机号通过验证后将自动注册
			</view>
			<uni-easyinput trim="all" :styles="styles" :placeholderStyle="placeholderStyle" primaryColor="#FF9BA7"
				placeholder="请输入手机号" v-model="value">
				<template #left>
					<view class="numberHead">+86</view>
				</template>
			</uni-easyinput>
			<view style="height: 20rpx;">

			</view>
			<uni-easyinput :styles="styles" :placeholderStyle="placeholderStyle" primaryColor="#FF9BA7" class="asdasd"
				placeholder="请输入验证码" v-model="value">
				<template #right>
					<view class="rightLay" @click="codeType?'':upCode()">{{codeType?(codeNum+'秒后再试'):'发送验证码'}}</view>
				</template>
			</uni-easyinput>
		</view>
		<view class="bnt">
			<image src="/static/bntBg.png" class="bntBg" mode="aspectFit"></image>
			登录
		</view>
		<view class="tipWrap" @click="action=!action">
			<uni-icons v-if="action" type="checkbox-filled" color="#FF7994" size="18"></uni-icons>
			<uni-icons v-else type="circle" color="#FF7994" size="18"></uni-icons>
			<view class="tipTxt">
				已阅读并同意<text>《用户协议》</text>与<text>《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				styles: {
					backgroundColor: " #F2F2F2",
					color: '#343434',
					borderColor: '#F2F2F2',
				},
				placeholderStyle: "color:#B6B6B6;font-size:21rpx",
				value1: '',
				value: '',
				codeType: false,
				codeNum: 60,
				action:false,
			};
		},
		methods: {
			upCode() {
				let that = this;
				// if (!that.codeType) return;
				that.codeType = true;
				if (this.codeNum > 0) {

					setTimeout(() => {
						that.codeNum--;
						that.upCode()
					}, 1000)
				} else {
					that.codeType = false;
					that.codeNum = 60
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.indexBg {
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: -2;
			top: 0;
		}
		.logoLay{
			margin: 292upx auto 82upx;

		.logo {			
			width: 262upx;
			margin: 0 auto;
			    text-align: center;
			    display: block;
		}
		.logoTxt{
			margin: 0 auto 0 164upx;
			width: 364upx;
		}
		}

		.loginWrap {
			width: 626upx;
			margin: 0 auto;

			.title {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: bold;
				font-size: 40rpx;
				color: #000000;
				line-height: 58rpx;
			}

			.subTitle {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 22rpx;
				color: #AEAEAE;
				line-height: 32rpx;
				margin-bottom: 50upx;
			}
			::v-deep .uni-easyinput {
					.is-input-border {
						border-radius: 15upx;
			
						height: 98upx;
						
					}
				
			}
		}

		.numberHead {
			width: 112upx;
			border-right: 2upx solid #D8D8D8;
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 400;
			font-size: 21rpx;
			color: #AEAEAE;
			line-height: 31rpx;
			padding-left: 34upx;
		}

		.rightLay {
			font-weight: 300;
			font-size: 23upx;
			color: #343434;
			line-height: 98upx;
			margin-right: 30upx;
		}

		.bnt {
			width: 700rpx;
			height: 115rpx;
			margin: 60upx auto 28upx;
			position: relative;
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: 500;
			font-size: 32rpx;
			color: #9E4C4C;
			line-height: 115rpx;
			text-align: center;

			.bntBg {
				width: 700rpx;
				height: 115rpx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
			}
		}
		.tipWrap{
			@include flexLayout(center, center);
			.tipTxt{
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 22rpx;
				color: #AEAEAE;
				line-height: 32rpx;
				margin-left: 16upx;
			}
		}
	}
</style>